<template>
  <div class="selectLocation">
    <div class="project_map" id="project_map" ref="container" style="width: 100%; height: 100%;"></div>
    <div class="layerVisble" style="background-color: rgb(255, 255, 255);" v-if="!layerVisble">
      <el-button @click="layerVisble = !layerVisble">图层</el-button>


    </div>

    <div style="background-color: rgb(255, 255, 255);  z-index: 100;
  position: absolute;
  padding: 2px 5px 2px 5px;
  top: 10px;
  left: 200px;border-radius: 5px;" v-if="!layerVisble">
      <el-switch v-model="drillHoleOpen" @change="drillHoleOpenChange" size="small" active-text="" inactive-text="开孔对比" />
    </div>

    <div class="layerswich">
      <div @click="baselayerSelct = true, changelayer()" class="layerswich_item"
        :class="{ active: baselayerSelct === true }">矢量
      </div>
      <div @click="baselayerSelct = false, changelayer()" class="layerswich_item"
        :class="{ active: baselayerSelct === false }">卫星
      </div>
    </div>

    <transition name="el-fade-in">
      <div v-dragView class="layerControl" v-if="layerVisble">
        <div class="dragHeader">
          <h5 style="margin-left: 10px;">{{ layerListType }}</h5>
          <el-button key="danger" type="danger" @click="clearAllRedLine()" link>清除所有红线</el-button>
          <el-icon class="close" @click="layerVisble = false">
            <Close />
          </el-icon>
        </div>

        <!-- <el-radio-group v-model="radio" class="mx-3">
            <el-radio size="large" v-for="(item, index) in MapList.groundList" :label="index" @change="fly">
             {{ item.name }}
            </el-radio>
          
          </el-radio-group> -->
        <!-- 
          <div class="list-group layerList">
            <a v-for="(item, index) in MapList.groundList" :label="index" @click="fly(index)"
              class="list-group-item list-group-item-action"> {{ item.name }}</a>
          </div> -->

        <ul class="list-group layerList ">
          <li v-for="(item, index) in MapList.groundList" :label="index" @click="fly(index)"
            class="list-group-item d-flex justify-content-between align-items-center">
            {{ item.name }}{{ layerListType != "风机点位" ? index + 1 : '' }}
            <el-popover placement="right" :width="300" trigger="click">
              <template #reference>
                <span class="badge bg-danger rounded-pill" @click="openEwGroundInfo(item.ewGroundInfos)"
                  v-if="item.ewGroundInfos != null">{{ item.ewGroundInfos.length }}</span>
              </template>
              <div>
          <li class="text-danger" v-for="(item, index) in ewGroundInfos" :key="item.id">
            {{ item.info }}
          </li>
      </div>

      </el-popover>

      </li>
      </ul>


  </div>
  </transition>
  <div id="popup" class="ol-popup" style="background-color: rgb(240, 240, 240)" v-show="popshow">
    <div class="pophead" style="width: 100%; height: 20px">
      <div id="popup-title" style="
                                        font: bold 15px sans-serif;
                                            align: left;
                                            position: absolute;
                                            top: 5px;
                                            left: 8px;
                                            color: #000000;
                                            height: 100px;
                                            border-radius: 10px;
                                            display: flex;
                                            justify-content: space-between;
                                            ">
        <div class="text-light-emphasis">钻孔预警信息</div>
        <div id="popup-closer" class="ol-popup-closer" @click="popshow = fasle"></div>
      </div>



      <!-- <a id="popup-closer" class="ol-popup-closer" style="color: #8e908c"></a> -->
    </div>

    <div id="popup-content" style="padding: 10px; width: 500px; height: 100px">

      <li class="text-danger" v-for="(item, index) in ewDrillholeInfos" :key="item.id">
        {{ item.info }}
      </li>


    </div>
  </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Feature from "ol/Feature";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Point from "ol/geom/Point";
import Overlay from "ol/Overlay.js";
import { Circle, Geometry, LineString, Polygon } from "ol/geom";
import {
  Icon,
  Style,
  Stroke,
  Circle as CircleStyle,
  Fill,
  Text,
} from "ol/style";
import { useRvo } from "@/hook/useRvo";
import { useStore } from "vuex";
import API from "@/network/api";
import { Cluster, OSM } from "ol/source.js";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
import { boundingExtent } from "ol/extent";
import { ElMessage, ElMessageBox } from "element-plus";
import { union } from "lodash";
import ico from '@/assets/image/gisIco/icon.png'
import icon_hover from '@/assets/image/gisIco/icon_hover.png'
import icon_erro from '@/assets/image/gisIco/icon_erro.png'
import { TRUE } from "ol/functions";
import { log } from "geotiff/dist-node/logging";
import app from "../../../public/app/aplication"
import { transform, useGeographic, Projection } from "ol/proj";

let layerListType = ref("光伏区红线区")
let layerVisble = ref(false);
const radio = ref("");
//地图容器
let map;
//矢量地图
let baseMapLayer_vec;
let baseMapLayer_sat;
//中文标记
let annotateMapLayer;
//加载资源类
let vectorSource;
let circleSource;
let circleLayer;
//加载的资源图层
let polygonsource;
let polygonterLayer;
let vectorLayer;
let chosePositionSource;
let chosePositionLayer;
let baselayerSelct = ref(true)
const store = useStore();
//弹窗
let popshow = ref(false);
const closePopup = () => {
  this.popshow.value = false;
}

const ewGroundInfos = ref([])
const openEwGroundInfo = (ew) => {
  ewGroundInfos.value = ew
}
const changelayer = () => {

  if (baselayerSelct.value) {
    map.removeLayer(baseMapLayer_sat)
    map.addLayer(baseMapLayer_vec)
  } else {
    map.removeLayer(baseMapLayer_vec)
    map.addLayer(baseMapLayer_sat)
  }
}
//地块类型
let groundType = "circle"
const fly = (e) => {
  // debugger
  let features = [];

  if (groundType === 'circle') {
    for (let item in circleSource.featuresRtree_.items_) {
      features.push(circleSource.featuresRtree_.items_[item]);
    }
  } else if (groundType === 'polygon') {
    for (let item in polygonsource.featuresRtree_.items_) {
      features.push(polygonsource.featuresRtree_.items_[item]);
    }
  }
  console.log(e);
  let a = features[e];
  console.log(features);

  Views.animate({ // 只设置需要的属性即可
    center: [(a.minX + a.maxX) / 2, (a.minY + a.maxY) / 2], // 中心点
    zoom: groundType === 'circle' ? 20 : 18, // 缩放级别
    rotation: undefined, // 缩放完成view视图旋转弧度
    duration: 1000 // 缩放持续时间，默认不需要设置
  })
  // Views.setCenter();
  // Views.setZoom(18);
};
// let container = document.getElementById("popup");
// let content = document.getElementById("popup-content");
// let overlay1 = new Overlay({
//   //设置弹出框的容器
//   element: container,
//   //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
//   autoPan: true,
//   autoPanAnimation: {
//     duration: 250,
//     //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
//   },
// });

const clearAllRedLine = () => {
  ElMessageBox.confirm(
    '该操作会删除地图所有红线图',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {

      let res = await API.gisDrillHole.clearAllRedLine({ id: store.getters["getProjectId"] })

      if (res.code == 200) {
        ElMessage.success(res.message)
        map.removeLayer(polygonterLayer)
        map.removeLayer(circleLayer)
        getmaplist()
      }
    })
    .catch(() => {

    })


}

let clusters = ref("");
let clustersOpen = {};
let MapList = ref("");

let ewDrillholeInfos = ref([]);
const Views = new View({
  projection: "EPSG:3857", //使用这个坐标系
  center: [12014838.35, 3614529.9],
  zoom: 4,
  maxZoom: 23,
  minZoom: 1,
  // //1.设置缩放级别为整数
  // constrainResolution: false,
  // //2.关闭无级缩放地图
  // smoothResolutionConstraint: false,
});

const emit = defineEmits(['clickDirllHole'])
onMounted(() => {


  /**
   * Create an overlay to anchor the popup to the map.
   */


  // overlay.setPosition(undefined);
  map = new Map({
    target: "project_map",
    view: Views,
  });
  map.on('pointermove', (evt) => {
    // console.log(evt)
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)
      ? 'pointer'
      : '';
  });

  //     // 天地图  标注
  // let url = "https://t{0-5}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
  // url = `${url}&T=vec_w&tk=875d21df8695479411a73970aa2bf7cf`;
  const source = new XYZ({
    url: app.vec_wUrl,
    projection: "EPSG:3857",
  });
  baseMapLayer_vec = new TileLayer({
    source: source,
  });

  // url = "https://t{0-5}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
  // url = `${url}&T=img_w&tk=875d21df8695479411a73970aa2bf7cf`;
  const sourceSat = new XYZ({
    url: app.img_wUrl,
    projection: "EPSG:3857",
  });
  baseMapLayer_sat = new TileLayer({
    source: sourceSat,
  });


  // url = "https://t{0-5}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
  // url = `${url}&T=cva_w&tk=875d21df8695479411a73970aa2bf7cf`;
  const sourceCVA = new XYZ({
    url: app.cva_wUrl,
    projection: "EPSG:3857",
  });

  annotateMapLayer = new TileLayer({
    source: sourceCVA,
  });


  //添加底图
  map.addLayer(baseMapLayer_vec);
  baseMapLayer_vec.setZIndex(0)
  // baseMapLayer_vec.setZIndex(0)
  baseMapLayer_sat.setZIndex(1)

  annotateMapLayer.setZIndex(2)

  map.addLayer(annotateMapLayer);

  getmaplist();
  // 加 聚合点



  // 气泡弹窗
  // const container = document.getElementById('popup');
  // const content = document.getElementById('popup-content');
  // const popup = new Overlay({
  //   // autoPan: true,
  //   element: container,
  //   // positioning: 'bottom-center',
  //   // stopEvent: false,
  //   autoPanAnimation: {
  //             duration: 250,
  //             //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
  //           },
  // });
  // map.addOverlay(popup);
  map.on("click", (e) => {
    popshow.value = false;
    //cluster要到外部申明
    clusters.getFeatures(e.pixel).then((clickedFeatures) => {
      if (clickedFeatures.length) {
        const features = clickedFeatures[0].get("features");

        if (features.length > 1) {
          console.log(1111111);
          const extent = boundingExtent(
            features.map((r) => r.getGeometry().getCoordinates())
          );
          map
            .getView()
            .fit(extent, { duration: 1000, padding: [50, 50, 50, 50] });
        } else {
          console.log(22222222222);
          if (features[0].values_.ewDrillholeInfos) {
            popshow.value = true;
            ewDrillholeInfos.value = features[0].values_.ewDrillholeInfos;

          }

          let attr = features[0].values_[0];
          let keyID = features[0].values_.zkCode;
          let coodinate = e.coordinate;
          let container = document.getElementById("popup");

          console.log(features[0].values_);


          let overlay1 = new Overlay({
            //设置弹出框的容器
            element: container,
            //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
            // autoPan: true,
            autoPanAnimation: {
              duration: 250,
              //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
            },
          });
          overlay1.setPosition(coodinate);
          map.addOverlay(overlay1);

          emit("clickDirllHole", features[0].values_.id)
        }


      }
    });
  });
});

const drillHoleOpen = ref(false)
const drillHoleOpenChange = () => {
  clustersOpen.setVisible(drillHoleOpen.value)
}

const createOpenPoint = (list) => {
  if (!list) {
    return
  }
  const features = [];
  for (let i = 0; i < list.length; ++i) {

    let point3857 = transform([list[i].openCoordinateX, list[i].openCoordinateY], "EPSG:4326", "EPSG:3857")

    features[i] = new Feature({
      geometry: new Point(point3857),
      id: list[i].id,
      zkCode: list[i].code + '(开孔)',
    });
  }

  const pointsource = new VectorSource({
    features: features,
  });
  // 添加feature到source//添加到cluster
  const clusterSource = new Cluster({
    distance: 20,
    minDistance: 5,
    source: pointsource,
  });
  ///////////////添加到适量层
  const pointerLayer = new VectorLayer({
    source: pointsource,
  });
  ///////////////添加到clusters层
  clustersOpen = new VectorLayer({
    source: clusterSource,
    style: stylefunctionOpen,
  });

  map.addLayer(clustersOpen);
  console.log(clustersOpen);
  clustersOpen.setVisible(drillHoleOpen.value)
}

const createPoint = (list) => {
  if (!list.holeList) {
    return
  }
  const features = [];

  // let target = true;
  //遍历点，EPSG4326
  for (let i = 0; i < list.holeList.length; ++i) {
    let lan = list.holeList[i].geom3857
      .slice(6, list.holeList[i].geom3857.length - 1)
      .split(/\s+/)[0];
    let lon = list.holeList[i].geom3857
      .slice(6, list.holeList[i].geom3857.length - 1)
      .split(/\s+/)[1];
    let lanNum = Number(lan);
    let lonNum = Number(lon);
    const coordinates = [lanNum, lonNum];

    // debugger

    // if (lanNum < -20026376.39 || lanNum > 20026376.39 || lonNum < -20026376.39 || lonNum > 20026376.39) {

    //   target = false;

    // } else {
    features[i] = new Feature({
      geometry: new Point(coordinates),
      id: list.holeList[i].id,
      zkCode: list.holeList[i].zkCode,
      warning: list.holeList[i].ewDrillholeInfos ? false : true,
    });
    if (list.holeList[i].ewDrillholeInfos) {
      features[i].set("ewDrillholeInfos", list.holeList[i].ewDrillholeInfos);
    }
  }

  // }


  // if (!target) {
  //   ElMessage.info("数据中坐标超出范围值")
  // }
  // 添加feature到source//添加点
  const pointsource = new VectorSource({
    features: features,
  });
  // 添加feature到source//添加到cluster
  const clusterSource = new Cluster({
    distance: 20,
    minDistance: 5,
    source: pointsource,
  });
  ///////////////添加到适量层
  const pointerLayer = new VectorLayer({
    source: pointsource,
  });
  ///////////////添加到clusters层
  clusters = new VectorLayer({
    source: clusterSource,
    style: stylefunction,
  });

  //添加点到map
  // map.addLayer(pointerLayer);
  //添加点到clusters
  map.addLayer(clusters);
  clusters.setZIndex(500)
  // 设置图层高度
  pointerLayer.setZIndex(500);

};
// 加面
const createPolygon = (list) => {

  layerListType.value = "红线区"
  if (!list.groundList) {
    return
  }
  const features = new Array(list.groundList.length);
  for (let i = 0; i < list.groundList.length; ++i) {
    let onePolygon = [];
    let polygoninfo = list.groundList[i]?.geo3857
      .slice(9, list.groundList[i].geo3857.length - 2)
      .split(",");
    for (let index = 0; index < polygoninfo.length; index++) {
      let lon = Number(polygoninfo[index].split(/\s+/)[0]);
      let lan = Number(polygoninfo[index].split(/\s+/)[1]);
      let point = [lon, lan];
      onePolygon.push(point);
    }
    let finalArr = [];
    finalArr.push(onePolygon);

    features[i] = new Feature({
      geometry: new Polygon(finalArr),
    });
  }
  polygonsource = new VectorSource({
    features: features,

  });
  polygonterLayer = new VectorLayer({
    source: polygonsource,
    // style: polugonstyles,
    style: new Style({

      // 图形区域内颜色
      fill: new Fill({
        color: "#4f4f4f00"
      }),
      stroke: new Stroke({
        width: 1,
        color: "#ff0000"
      }),
    })
  });
  map.addLayer(polygonterLayer);
  polygonterLayer.setZIndex(200);
};

// 设置开孔样式
const stylefunctionOpen = (feature) => {
  const styleCache = {};
  const size = feature.get("features").length;
  let style = styleCache[size];
  if (!style) {
    if (size == 1) {
      if (feature.values_.features[0].values_.warning) {
        style = new Style({
          image: new Icon({
            src: icon_hover,
            scale: map.getView().getZoom() / 24,
          }),
          text: new Text({
            //对齐方式
            textAlign: "center",
            //文本基线
            textBaseline: "middle",
            //字体样式
            font: "normal 10px 微软雅黑",
            //文本内容
            text: feature.values_.features[0].values_.zkCode,
            //填充样式
            fill: new Fill({
              color: "#aa3300",
            }),
            offsetY: (20 * map.getView().getZoom()) / 12,
            //笔触
            stroke: new Stroke({
              color: "#ffcc33",
              width: 2,
            }),
            scale: map.getView().getZoom() / 12,
          }),
        });
      } else {
        style = new Style({
          image: new Icon({
            src: icon_hover,
            scale: map.getView().getZoom() / 24,
          }),
          text: new Text({
            //对齐方式
            textAlign: "center",
            //文本基线
            textBaseline: "middle",
            //字体样式
            font: "normal 10px 微软雅黑",
            //文本内容
            text: feature.values_.features[0].values_.zkCode,
            //填充样式
            fill: new Fill({
              color: "#aa3300",
            }),
            offsetY: (20 * map.getView().getZoom()) / 12,
            //笔触
            stroke: new Stroke({
              color: "#ffcc33",
              width: 2,
            }),
            scale: map.getView().getZoom() / 12,
          }),
        });
      }
    } else {
      style = new Style({
        image: new CircleStyle({
          radius: 10,
          stroke: new Stroke({
            color: "#fff",
          }),
          fill: new Fill({
            color: "#3399CC",
          }),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: "#fff",
          }),
        }),
      });
      styleCache[size] = style;
    }
  }
  return style;
};
//设置点样式
const stylefunction = (feature) => {
  const styleCache = {};
  const size = feature.get("features").length;
  let style = styleCache[size];
  if (!style) {
    if (size == 1) {
      if (feature.values_.features[0].values_.warning) {
        style = new Style({
          image: new Icon({
            src: ico,
            scale: map.getView().getZoom() / 24,
          }),
          text: new Text({
            //对齐方式
            textAlign: "center",
            //文本基线
            textBaseline: "middle",
            //字体样式
            font: "normal 10px 微软雅黑",
            //文本内容
            text: feature.values_.features[0].values_.zkCode,
            //填充样式
            fill: new Fill({
              color: "#aa3300",
            }),
            offsetY: (20 * map.getView().getZoom()) / 12,
            //笔触
            stroke: new Stroke({
              color: "#ffcc33",
              width: 2,
            }),
            scale: map.getView().getZoom() / 12,
          }),
        });
      } else {
        style = new Style({
          image: new Icon({
            src: icon_erro,
            scale: map.getView().getZoom() / 24,
          }),
          text: new Text({
            //对齐方式
            textAlign: "center",
            //文本基线
            textBaseline: "middle",
            //字体样式
            font: "normal 10px 微软雅黑",
            //文本内容
            text: feature.values_.features[0].values_.zkCode,
            //填充样式
            fill: new Fill({
              color: "#aa3300",
            }),
            offsetY: (20 * map.getView().getZoom()) / 12,
            //笔触
            stroke: new Stroke({
              color: "#ffcc33",
              width: 2,
            }),
            scale: map.getView().getZoom() / 12,
          }),
        });
      }
    } else {
      style = new Style({
        image: new CircleStyle({
          radius: 10,
          stroke: new Stroke({
            color: "#fff",
          }),
          fill: new Fill({
            color: "#3399CC",
          }),
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: "#fff",
          }),
        }),
      });
      styleCache[size] = style;
    }
  }
  return style;
};
// 请求数据

let idRvo = useRvo().idRvo;
const getmaplist = async () => {
  idRvo.id = store.getters["getProjectId"];
  let res = await API.map.list(idRvo);
  MapList.value = res.data;
  createPoint(MapList.value);

  let opencoorRes = await API.drillHole.listByOpen(idRvo);

  createOpenPoint(opencoorRes.singleData)

  groundType = MapList.value.groundType
  if (MapList.value.groundType === "circle") {
    createCircle(MapList.value)
  } else {
    createPolygon(MapList.value);
  }

};



// 绘制风机圆 
const createCircle = (list) => {
  layerListType.value = "风机点位"
  let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
  let circleRadius = 8.7 / metersPerUnit;
  const features = new Array(list.groundList.length);
  for (let i = 0; i < list.groundList.length; ++i) {
    let lan = list.groundList[i].geo3857
      .slice(6, list.groundList[i].geo3857.length - 1)
      .split(/\s+/)[0];
    let lon = list.groundList[i].geo3857
      .slice(6, list.groundList[i].geo3857.length - 1)
      .split(/\s+/)[1];
    let lanNum = Number(lan);
    let lonNum = Number(lon);
    const coordinates = [lanNum, lonNum];
    let lon4326 = Number(list.groundList[i].geo
      .slice(6, list.groundList[i].geo.length - 1)
      .split(/\s+/)[1])
    console.log(lon4326, Math.cos((lon4326 / 180) * Math.PI));
    features[i] = new Feature({
      geometry: new Circle(coordinates, 7.5 / Math.cos((lon4326 / 180) * Math.PI)),
      id: list.groundList[i].id
    });
  }

  circleSource = new VectorSource({
    features: features,

  });
  circleLayer = new VectorLayer({
    source: circleSource,
    // style: polugonstyles,
    style: new Style({

      // 图形区域内颜色
      fill: new Fill({
        color: "#4f4f4f00"
      }),
      stroke: new Stroke({
        width: 1,
        color: "#ff0000"
      }),
    })
  });
  map.addLayer(circleLayer);
  circleLayer.setZIndex(200);

}
// 定位某个点
const flyToPoint = (item) => {

  console.log("Map:", item.id);
  let pointObject = MapList.value.holeList.find(element => {
    console.log(element.id);
    return element.id === item.id;
  })

  if (!pointObject) {
    ElMessage.info("未查找到转换后坐标")
    return
  }

  console.log(pointObject);
  let lan = pointObject.geom3857
    .slice(6, pointObject.geom3857.length - 1)
    .split(/\s+/)[0];
  let lon = pointObject.geom3857
    .slice(6, pointObject.geom3857.length - 1)
    .split(/\s+/)[1];
  let lanNum = Number(lan);
  let lonNum = Number(lon);

  if (lanNum < -20026376.39 || lanNum > 20026376.39 || lonNum < -20026376.39 || lonNum > 20026376.39) {
    ElMessage.info("坐标值有误!无法定位")
    return;
  }

  Views.animate({ // 只设置需要的属性即可
    center: [lanNum, lonNum], // 中心点eeeeeeeeeeeeeeeeeeeeeeeeeeee
    zoom: 20, // 缩放级别
    rotation: undefined, // 缩放完成view视图旋转弧度
    duration: 1000 // 缩放持续时间，默认不需要设置
  })


}



defineExpose({
  flyToPoint
})
</script>

<style scoped lang="less">
/deep/ .el-switch__label.el-switch__label--left.is-active{
    color: #000;
}
// /deep/ .el-switch--small.el-switch__label{
//   color: #e48c19;

// }
.list-group-item:hover {

  cursor: pointer;
  background-color: #ed972651;
}

.close {

  cursor: pointer;
  margin-right: 5px;

  :hover {
    color: aqua;
  }
}

.dragHeader {
  margin-top: 10px;
  // border-radius: 5px;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.183)
}

.selectLocation {
  width: 100%;
  height: 100%;
  position: relative;
  // float: right;
}

.layerVisble {

  z-index: 100;
  position: absolute;
  top: 60px;
  left: 50px;
}

.layerswich {
  display: flex;
  z-index: 100;
  position: absolute;
  width: 140px;
  top: 10px;
  left: 50px;

  .layerswich_item {
    height: 30px;
    width: 60px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid rgb(241, 227, 227);
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    &.active {
      background-color: #e48c19;
    }
  }

}

.layerControl {
  .header {
    height: 35px;
  }

  .layerList {
    margin-top: 2px;
    margin-bottom: 5px;
    padding-top: 5px;
    height: calc(100% - 45px);
    overflow: auto;
  }

  position: absolute;
  z-index: 999;
  left: 79px;
  top: 36px;
  height: 360px;
  width: 260px;
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.popup {
  // width: 200px;
  // height: 100px;
}

.ol-popup-closer {
  cursor: pointer;
  text-decoration: none;
  position: absolute;
  top: -5px;
  right: -401px;
}

.ol-popup-closer:hover {
  color: aqua;
}

.ol-popup-closer:after {
  content: "✖";
}

.ol-popup {
  position: absolute;
  background-color: #eeeeee;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -150px;
  min-width: 280px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  // background-color: bisque
}

.ol-popup:after {
  // background-color: bisque;
  border-top-color: rgb(240, 240, 240);
  border-width: 10px;
  left: 147px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: rgb(240, 240, 240);
  border-width: 11px;
  left: 147px;
  margin-left: -11px;

}
</style>
